import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Icon, Spin } from 'antd';
import GlobalFooter from '@/components/GlobalFooter';
import DocumentTitle from 'react-document-title';
import styles from './UserLayout.less';
import logo from '../assets/logo.svg';
import getPageTitle from '@/utils/getPageTitle';
import { sysNameCN } from '@/common/sysParam';
import { getPageQuery } from '@/utils/utils';

const pageQuery = getPageQuery();
const copyright = (
  <Fragment>
    易联众信息技术股份有限公司 <Icon type="copyright" /> 版权所有
  </Fragment>
);

class UserLayout extends Component {
  componentDidMount() {
    const {
      dispatch,
      route: { routes, authority },
    } = this.props;
    dispatch({
      type: 'menu/getMenuData',
      payload: { routes, authority },
    });
    if (pageQuery.userName) {
      dispatch({
        type: 'global/login',
        payload: pageQuery,
      });
    }
  }

  render() {
    const {
      children,
      location: { pathname },
      breadcrumbNameMap,
    } = this.props;
    return (
      <DocumentTitle title={getPageTitle(pathname, breadcrumbNameMap)}>
        {pageQuery.userName ? (
          <Spin spinning className="globalSpin" size="large" />
        ) : (
          <div className={styles.container}>
            <div className={styles.content}>
              <div className={styles.top}>
                <div className={styles.header}>
                  <img alt="logo" className={styles.logo} src={logo} />
                  <span className={styles.title}>{sysNameCN}</span>
                </div>
              </div>
              {children}
            </div>
            <GlobalFooter copyright={copyright} />
          </div>
        )}
      </DocumentTitle>
    );
  }
}

export default connect(({ menu: menuModel }) => ({
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
}))(UserLayout);
